<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            //  如果想要那种方式设置属性和方法，必须转换成该种类型
            //  1、js对象转换成jquery对象。  $(js对象)
            //  2、jquery休想转换成js对象。  1.jquery对象[索引值] 2.jquery对象.get(索引值)

            var box = document.getElementById("box");
            var cbox = document.getElementsByClassName("box");
            var div = document.getElementsByTagName("div");

            //jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
            var jqbox = $("#box");
            var jqCbox = $(".box");
            var jqdiv = $("div");

            console.log(box);
            console.log(jqbox);
            console.log("------------");
            console.log(cbox);
            console.log(jqCbox);
            console.log("------------");
            console.log(div);
            console.log(jqdiv);

            //  转换
            box = $(box);
            cbox = $(cbox);
            div = $(div);

            console.log(box);
            console.log(jqbox);
            console.log("------------");
            console.log(cbox);
            console.log(jqCbox);
            console.log("------------");
            console.log(div);
            console.log(jqdiv);

            //转换成了jquery对象，皮上面有功能可以直接调用。
            div.css({"width": 100, "height": 100, "border": "1px solid red"});
            box.css("background", "red");
            cbox.css("background", "yellow");

            //jquery对象转换成js对象
            jqdiv[0].style.backgroundColor = "black";
            jqdiv.get(4).style.backgroundColor = "pink";

        });
    </script>
</head>
<body>
    <div></div>
    <div class="box"></div>
    <div id="box"></div>
    <div class="box"></div>
    <div></div>
</body>
</html>